<!--
 * @Author: HeAo
 * @Date: 2022-07-27 11:20:27
 * @LastEditTime: 2022-08-30 18:52:17
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \HTML5&CSS3\第九天\6-轮播图.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* 设置轮播图容器-轮播图的显示区域 */
    div {
      width: 800px;
      height: 300px;
      border: 1px solid;
      margin: 0 auto;
      /* 将超出的部分隐藏 */
      overflow: hidden;

    }

    /*ul足够大 让它并行显示，再通过动画就行——隐藏区域*/
    ul {
      width: 3000px;
      height: 300px;
      /* 解决子元素浮动 父元素高度塌陷，overflow: hidden有很多用处  */
      overflow: hidden;
      animation: name duration timing-function delay iteration-count direction fill-mode;
      /* animation：关键帧的名称 动画持续时间 匀速执行 重复执行 */
      animation: swipe 8s linear infinite;
    }

    /* 并行 */
    ul li {
      float: left;
      width: 400px;
      height: 300px;
    }

    ul:hover li {
      opacity: 0.5;
    }

    ul li:hover {
      opacity: 1;
    }

    ul li img {
      width: 400px;
      height: 300px;
    }

    /* 动画关键帧 */
    @keyframes swipe {

      /* 开始 */
      from {
        margin-left: 0;
      }

      /* 结束 -4*400=-1600px*/
      to {
        margin-left: -1600px;
      }
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li><img src="./images/ad7.jpeg" alt=""></li>
      <li><img src="./images/ad8.jpg" alt=""></li>
      <li><img src="./images/ad9.jpeg" alt=""></li>
      <li><img src="./images/ad10.jpg" alt=""></li>
      <!-- 解决bug：在前四张之上，复制粘贴第一张和第二张，形成一圈 -->
      <li><img src="./images/ad7.jpeg" alt=""></li>
      <li><img src="./images/ad8.jpg" alt=""></li>
    </ul>
  </div>

</body>

</html>